﻿<!doctype html>
<html>
<head>
@model MvcApplication1.Models.ViewReportModel

@{
    ViewBag.Title = "ViewReport";
}

<meta charset="utf-8">
<title>View Report</title>
<link rel="stylesheet" type="text/css" href="~/CSS/main.css">
<script src="~/Scripts/javascript.js"></script>
<script>
    var report = JSON.parse('@Html.Raw(this.Model.report)');
</script>
</head>
<body>
	<div id="main">
    	<div id="darkbar">
        	<p id="company">IntelliFleet</p>
            <img id="truckicon" src="~/Images/truckiconsmall.png">
            <p id="email">@ViewBag.Username</p>
            <span id ="triangle" onClick="toggleUserBox(0)"></span>
            <img id="trianglerotated" src="~/Images/trianglerotated.png" onClick="toggleUserBox(1)">
            <div id="userbox">
            	<a id="userlink1" href="~/Home/Settings"><p>Settings</p></a>
                <a id="userlink2" href="~/Home/AccountInformation"><p>Account Information</p></a>
                <a id="userlink3" href="~/SignIn/SignOut"><p>Sign Out</p></a>
            </div>
        </div>
        <div id="lightbar">
            <a href="~/Home/Index"><span id ="dailyupdates"></span></a>
            <a href="~/Home/FindReports"><span id ="findreports"></span></a>
            <a href="~/Home/ReportLadder"><span id ="reportladder"></span></a>
            <a href="~/Home/About"><span id ="about"></span></a>
            <a href="~/Home/Contact"><span id ="contact"></span></a>
        </div>
        <div id="description">
        	<p id="title">View Report</p>
            <p id="summary">Browse reports stored in your personal fleet database.</p>
        </div>
        <div id="viewreport">
            <p id="viewgrade"></p>
            <img id="pointfraction" src="~/Images/pointfraction.png" />
            <br />
            <p id="viewpoints"></p>
            <p id="viewdriver">Driver: @this.Model.ParseVIN(this.Model.VIN, ViewBag.Username)</p>
            <p id="viewvin"></p>
            <p id="tabletitle1">Infraction Overview</p>
            <div id="viewheaders1">
                <p id="header1">Infraction Type</p>
                <p id="header2">Count</p>
                <p id="header3">Total Points Deducted</p>
            </div>
            <table id="infractionoverview">
                <tr>
                    <td class="view" width="34%">Speeding</td>
                    <td class="view" width="33%">@this.Model.SpeedingCount</td>
                    <td class="view" width="33%">@this.Model.SpeedingTotal</td>
                </tr>
                <tr>
                    <td class="view" width="34%">Excessive Acceleration</td>
                    <td class="view" width="33%">@this.Model.ExcessiveAccelerationCount</td>
                    <td class="view" width="33%">@this.Model.ExcessiveAccelerationTotal</td>
                </tr>
                <tr>
                    <td class="view" width="34%">Sudden Braking</td>
                    <td class="view" width="33%">@this.Model.SuddenBrakingCount</td>
                    <td class="view" width="33%">@this.Model.SuddenBrakingTotal</td>
                </tr>
                <tr>
                    <td class="view" width="34%">Hard Turn</td>
                    <td class="view" width="33%">@this.Model.HardTurnCount</td>
                    <td class="view" width="33%">@this.Model.HardTurnTotal</td>
                </tr>
            </table>
            <p id="tabletitle2">Infraction Breakdown</p>
            <div id="viewheaders2">
                <p id="viewheader1">Infraction Type</p>
                <p id="viewheader2">Duration</p>
                <p id="viewheader3">Points Deducted</p>
            </div>
            <table id="infractionbreakdown">
                @foreach(var snapshot in this.Model.snapshots)
                {
                     foreach(Dictionary<string, object> flag in snapshot.Flags)
                     {
                         <tr>
                             <td class="view" width="34%">@flag["type"]</td>
                             <td class="view" width="33%">@flag["duration"]</td>
                             <td class="view" width="33%">@Math.Round(Convert.ToDouble(flag["deductions"]), 2, MidpointRounding.AwayFromZero)</td>
                         </tr>
                     }
                } 
            </table>
        </div>
        <script>
            document.getElementById("viewgrade").innerHTML = report.Grade;
            document.getElementById("viewpoints").innerHTML = report.Points.toFixed(1);
            document.getElementById("viewvin").innerHTML = "VIN: " + report.VIN;
        </script>
    </div>
</body>
</html>
